<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型</title>
    <style>
        /* 盒子模型主要的属性有：padding内边距 border边框 margin外边距 */
        #box-demo {
            width: 200px;
            height: 150px;
            background-color: greenyellow;
            padding: 10px;
            border: 20px solid brown;
            margin: 100px;
        }

        /* 以 border边框 举例，盒子模型的三个属性为复合属性，可以使用多种方式进行设置 */
        #border-demo-1 {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            /* border 为复合属性 */
            border: 10px solid blue;
            margin: 10px;
        }
        #border-demo-2 {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            /* 这里可以使用单独的属性进行设置 */
            border-width: 10px;
            border-style: solid;
            border-color: blue;
            /* 但是这里的三个独立的属性依然是复合属性，因为只使用一个参数即可设置四个边框 */
            margin: 10px;
        }
        #border-demo-3 {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            /* 使用上面的独立的属性可以同时为四个边框设置不同的样式 */
            border-width: 10px 20px 30px 40px;
            border-style: solid dashed dotted double;
            border-color: red yellow blue green;
            /* 参数的顺序遵循上右下左 */
            margin: 10px;
        }
        #border-demo-4 {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            /* 除了同时为四条边框设置样式以外，你还可以为某条边框单独设置样式 */
            border-right: 20px dashed purple;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="box-demo">这是一个盒子</div>
    <div id="border-demo-1">
        <p>这是一个盒子模型边框的演示</p>
        <p>这里使用复合属性进行设置</p>
    </div>
    <div id="border-demo-2">
        <p>这是一个盒子模型边框的演示</p>
        <p>这里使用独立的属性进行设置</p>
    </div>
    <div id="border-demo-3">
        <p>这是一个盒子模型边框的演示</p>
        <p>可以为四条边框同时进行设置，遵循上右下左的顺序</p>
        <p>花里胡哨！</p>
    </div>
    <div id="border-demo-4">
        <p>这是一个盒子模型边框的演示</p>
        <p>除了同时为四条边框设置样式以外，你还可以为某条边框单独设置样式</p>
    </div>
    <p style="color: red; font-size: 30px;">这里对边框 border 属性进行的设置对 padding 和 margin 运用同理！！！</p>
</body>
</html>